<template>
    <view class="kaptcha" v-if="visible" @click="close()">
        <view class="container" @click.stop="">
            <view class="top">
                <view class="left">
                    <input class="inp" placeholder="请输入" :value="code" @blur="inputChange" />
                </view>
                <view class="right">
                    <image :src="kaptchaImg" class="img"  mode="scaleToFill" @click="getKaptcha()"></image>
                </view>
            </view>
            <view class="uni-btn" @click="confirm()">确定</view>
        </view>
    </view>
</template>

<script>
import {LoginApi} from '@/api/user/LoginApi.js'

export default {
    name:"Kaptcha",
    data() {
        return {
            visible:false,
            kaptchaToken:"",
            kaptchaImg:"http://img.tangexinxi.com/image/2024/8/8/17231306206427591.jpg?x-oss-process=image/resize,w_100,h_100,m_fill",
            code:""

        }
    },
    methods: {
        show(){
            this.visible = true
            this.kaptchaToken = ""
            this.kaptchaImg = ""
            this.code = ""
            this.getKaptcha()
        },
        close(){
            this.visible = false
        },
        inputChange(e){
            this.code = e.detail.value
        },
        confirm(){
            if(this.code.length !== 4){
                uni.showToast({title: '验证码长度不正确',icon: 'none'});
                return
            }

            this.visible = false

            let data = {
                kaptchaToken:this.kaptchaToken,
                kaptchaCode:this.code
            }

            this.$emit('refresh',data)

        },
        getKaptcha(){
            LoginApi.kaptcha().then((response)=>{
                this.kaptchaToken = response.kaptchaToken
                this.kaptchaImg = response.base64Img
            })
        },
    }
}
</script>

<style lang="scss">
.kaptcha{ width:100%; height:100%; background:rgba(0, 0, 0, .5); position: fixed; top:0px;
           left:0px; z-index: 999; }
.kaptcha .container{ width:70%; position: absolute; left:15%; top:50%; margin-top:-100px;
        background: #FFF; padding:20px 20px; border-radius: 5px; }
.kaptcha .container .top{ display: flex; width: 100%;}
.kaptcha .container .top .left{ flex: 1;}
.kaptcha .container .top .left .inp{ border: solid #EEE; border-width: 1px 0 1px 1px; height:32px; line-height: 32px;
        font-size: 16px; padding-left:10px;}
.kaptcha .container .top .right{width:80px;}
.kaptcha .container .top .right .img{ width:80px; height:32px;}
.kaptcha .container .uni-btn{margin-top:20px;}
</style>
